<template>
  <a-spin :spinning="spinning">
    <!-- <a-card :bordered="false">
      <a-row :gutter="16" type="flex">
        <a-col :span="11">
          <a-descriptions title="个人信息" :column="2">
            <a-descriptions-item label="姓名"> 张三 </a-descriptions-item>
            <a-descriptions-item label="性别"> 男 </a-descriptions-item>
            <a-descriptions-item label="民族"> 汉 </a-descriptions-item>
            <a-descriptions-item label="文化程度"> 本科 </a-descriptions-item>
            <a-descriptions-item label="联系电话"> 13618509210 </a-descriptions-item>
            <a-descriptions-item label="工作单位"> 贵阳XXX有限公司 </a-descriptions-item>
            <a-descriptions-item label="居住地址"> 贵州省贵阳市观山湖区 </a-descriptions-item>
            <a-descriptions-item label="是否残疾"> 否 </a-descriptions-item>
            <a-descriptions-item label="户籍信息"> 本市 </a-descriptions-item>
            <a-descriptions-item label="收入认定"> 低保 </a-descriptions-item>
            <a-descriptions-item label="户籍地址"> 贵州省贵阳市观山湖区 </a-descriptions-item>
          </a-descriptions>
        </a-col>
        <a-col :span="2">
          <div class="line"></div>
        </a-col>
        <a-col :span="11">
          <a-descriptions title="房屋信息" :column="2">
            <a-descriptions-item label="户型"> 三室一厅 </a-descriptions-item>
            <a-descriptions-item label="占地面积"> 124㎡ </a-descriptions-item>
            <a-descriptions-item label="楼层"> 18 </a-descriptions-item>
            <a-descriptions-item label="栋数"> C3 </a-descriptions-item>
            <a-descriptions-item label="详细地址"> 贵州省贵阳市观山湖区 </a-descriptions-item>
            <a-descriptions-item label="总楼层"> 32 </a-descriptions-item>
            <a-descriptions-item label="房屋类型" :span="2"> 新房 </a-descriptions-item>
            <a-descriptions-item label="物业费"> 200/月 </a-descriptions-item>
            <a-descriptions-item label="物业电话"> 17585427603 </a-descriptions-item>
          </a-descriptions>
        </a-col>
      </a-row>
    </a-card> -->
    <a-card :bordered="false" class="m-t-24">
      <a-timeline v-if="!$isEmpty(stepList)">
        <a-timeline-item v-for="(item, index) in stepList" :key="index">
          <a-descriptions :title="`${item.Stage} ${item.ModifyDate}`" bordered size="small">
            <a-descriptions-item label="分配人姓名">{{ item.EsitesPerson }}</a-descriptions-item>
            <a-descriptions-item label="项目名称"> {{ item.Name }} </a-descriptions-item>
            <a-descriptions-item label="户型"> {{ item.Structure }} </a-descriptions-item>
            <a-descriptions-item label="地址">
              {{ item.Name }}{{ item.Roof }}栋{{ item.Unit }}单元{{ item.Floor }}楼{{ item.Number }}号
            </a-descriptions-item>
            <a-descriptions-item label="面积"> {{ item.Area }}㎡ </a-descriptions-item>
            <!-- <a-descriptions-item label="房屋状态">{{ item.Stage }}</a-descriptions-item> -->
            <a-descriptions-item label="安置点"> {{ item.Esites }} </a-descriptions-item>
            <a-descriptions-item label="操作人"> {{ item.AlterExecutor }} </a-descriptions-item>
            <a-descriptions-item label="时间"> {{ item.ModifyDate | moment }} </a-descriptions-item>
          </a-descriptions>
        </a-timeline-item>
      </a-timeline>
      <div v-else class="p-y-20">
        <a-empty :image="simpleImage"></a-empty>
      </div>
    </a-card>
  </a-spin>
</template>

<script>
import { getFenHousesDetail } from '@/api/common'
import { Empty } from 'ant-design-vue'
export default {
  props: {
    proposerID: {
      type: [String, Number],
      default: ''
    }
  },
  data () {
    return {
      spinning: false,
      stepList: [],
      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE
    }
  },
  created () {
    this.fetchData()
  },
  methods: {
    fetchData () {
      this.spinning = true
      getFenHousesDetail({
        ProposerID: this.$route.params.id || this.proposerID
      })
        .then((res) => {
          this.stepList = res
        })
        .finally(() => {
          this.spinning = false
        })
    }
  }
}
</script>
<style lang="less" scoped>
.line {
  position: relative;
  height: calc(100% - 38px);
  width: 1px;
  background-color: #e8e8e8;
  margin: 0 auto;
  transform: scaleX(0.5);
  margin-top: 20px;
}
/deep/ .ant-steps {
  overflow: unset;
  // &::-webkit-scrollbar {
  //   display: none;
  // }
  .ant-steps-item {
    overflow: unset;
    flex: unset;
    .ant-steps-item-content {
      overflow: hidden;
      .ant-steps-item-description {
        max-width: unset;
        display: block;
      }
    }
  }
}
/deep/ .el-scrollbar__wrap {
  padding-bottom: 24px;
}
/deep/ .ant-card-body {
  padding-bottom: 4px;
}
</style>
